<template lang="jade">
div#app
  div.return-bar
    i.iconfont(@click="back()") &#xe668;
    新手特权 注册就送568红包
  div.login-from.detail_top
    div
      img(src="../../assets/images/414/414_banner.png",  style="width:100%")
    validator(name="validation1")
      div.mb10
        div.login-control
          div.control
            span 手机号
            input(v-model="username",placeholder="请输入您的手机号码",v-validate:username="{required:true, maxLength: 10}",maxLength="11")
          div.control
            span 图片验证码
            input(v-model="verify",placeholder="请输入验证码",v-validate:code="{required:true, maxLength: 4}",maxLength="4")
            img.verify(v-show="show_img", src="{{img_src}}", @click="reloadImg")

          div.control
            span 验证码
            input(v-model="code",placeholder="请输入验证码",v-validate:code="{required:true, maxLength: 4}",maxLength="4")
            button.send-code(v-bind:class="timecls", @click="sendVCode()") {{timemsg}}


          div.control
            span 密码
            input(v-show=" !showPWD ", v-model="password",type="password",placeholder="设置密码",v-validate:password="{required:true}")
            input(v-show=" showPWD ", v-model="password",type="text",placeholder="设置密码",v-validate:password="{required:true}")
            i.iconfont.icon-eyesclose(@click="switchKw()") {{{iconString}}}

          div.control
            span 确认密码
            input(v-model="repassword",type="password",placeholder="确认密码",v-validate:repassword="{required:true}")
          div.control
            span 推荐人(选填)
            input(type="text",placeholder="推荐人（选填）",v-model="reference")




          div
            button.p_btn.postIt(type="button", @click="regSumbit()") 注册
          div.link
            a.relation-link(v-link="{ path: '/forget-pwd' }") 忘记密码
            span.spr |
            a.relation-link.red(v-link="{ path: '/login' }") 立即登录

    div.img.mb10
      img(src="../../assets/images/414/414_hl.png")

    div.img
      img(src="../../assets/images/414/414_entry.png", v-link="{ path: '/login' }")

    div.neworder(v-show="  items ")
      dl
        dt {{items.name}}
        dd
          span(style="width:70%;")
            em 年收益率
            b {{items.borrow_apr}}%
              strong  {{items.borrow_period}}个月/100元起投
          span(style="width:30%;")
            a.input(v-link="{ name: 'detail', params: { detailId: items.borrow_nid } }") 立即摘标

    div.img
      img(src="../../assets/images/414/414_rule_03.png")

    div.qrcode
      span 请关注我们的有喜财富公众号
      img(src="../../assets/images/414/qrcode-uxi.png")
    div.img
      img(src="../../assets/images/414/414_rule_02.png")

</template>


<script>
import '../../assets/sass/user/login.scss'
import {c_reg_verify_img, c_base64, Api_Reg,Api_Reg_Code} from '../../config/api'
import {Loading} from 'vux'

var time_ment = null;

export default {

  data () {
    return {

      recommend_uid: '',
      username: localStorage.getItem("tel") || '',
      code: '',
      img_src:'',
      show_img:true,
      verify:'',
      password: '',
      repassword: '',
      rec_name: '',
      busy: false,
      iconString:'&#xe712;',
      showPWD:false,
      reference:'',
      timecls:'',
      timemsg:'获取验证码',
      timer: 10,       //默认倒数30秒
      stop : false,   //默认是停止的，但界面加载之后会变成false
      Interval:null  //setInterval的对象
    }
  },
  components:{
    Loading
  },
  methods: {
    reloadImg(){
      /*this.$http({url: c_img_verify, method: 'GET'}).then(function (response) {
        this.img_src = c_img_verify;
      });*/
      clearInterval(time_ment);
      this.show_img = false;
      this.img_src = '';
      var that = this;

      var timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000;
      var rkey = that.global.r_key()
      var pkey = that.global.p_key()

      //this.img_src = c_img_verify
      time_ment = setInterval(function(){
        that.show_img = true;
        that.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
      },300);

    },

    back(){
      window.history.back();
    },

    update () {
        if(this.timer <= 0)
        {
            //this.timer = 10;
            this.timecls='';
            this.stop = false;
            this.timemsg = "获取验证码";
        }
        else{
          this.timecls='gray';
            this.timer--;
            this.timemsg = '剩余'+this.timer+'秒';
        }

    },


    startTimer () {
        //console.log('start');
        //如果是false就开始倒计时，如果是true就停止倒计时
        clearInterval(this.Interval);
        this.timer = 60;
        if(this.stop == false)
        {
            this.Interval = setInterval(this.update,1000);
        }
        else
        {
            clearInterval(this.Interval);
        }

        this.stop = !this.stop;
    },

    switchKw(){
      if(this.iconString == '&#xe712;')
        this.iconString = '&#xe648;'
      else
        this.iconString = '&#xe712;'
      this.showPWD = !this.showPWD;
    },

    regSumbit: function () {
      if (this.$validation1.invalid || this.busy) {
        return false;
      }

      if(this.password != this.repassword){
        alert('两次密码输入不一致！')
        return false;
      }
      this.busy = true, this.$store.dispatch('setShowLoading', true);
      var data = {'verify':this.verify, 'phone': this.username,'code':this.code,'password':this.password,'rec_name':this.reference}
      this.$http.post(Api_Reg, data,'').then(function (response) {
          var rs = response.data;
          alert(rs.msg)
          this.busy = false, this.$store.dispatch('setShowLoading', false);
          if(rs.status){
            localStorage.setItem("tel", this.username);
            sessionStorage.setItem("login", true);
            //sessionStorage.setItem("loan", false)
            this.$router.go('/openAccount')
          }else{
            this.reloadImg();
            this.verify='';
          }
      });
    },

    sendVCode: function () {

      //console.log(this.stop)

      if(this.verify=='' || this.stop || this.busy) {
        return false;
      }
      if(!this.username){
        alert('请输入您的手机号！')
        return false;
      }

      this.$store.dispatch('setShowLoading', true);

      this.busy = true;
      var data = {'verify':this.verify, 'phone': this.username}
      this.$http.post(Api_Reg_Code, data,'').then(function (response) {
          this.$store.dispatch('setShowLoading', false);
          var rs = response.data;
          alert(rs.msg)
          this.busy = false;
          if(rs.status)
            this.startTimer();
          else{
            this.reloadImg();
            this.verify='';
          }
      });



    },
    jm(){
      this.$http({url: c_base64+'&code='+this.recommend_uid, method: 'GET'}).then(function (response) {
        this.reference = response.data.username  || '';
      });
    }
  },
  route: {
    activate ( transition ) {
      var timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000;

      var rkey = this.global.r_key()
      var pkey = this.global.p_key()

      this.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;


      this.from = transition.to.query.from
      this.recommend_uid = transition.to.query.recommend_uid || ''
      if(this.recommend_uid!==""){
        this.jm();
      }
      //console.log(this.from)
      if(sessionStorage.getItem("login")){
        this.$route.router.go('/')
      }else{
        transition.next();
      }


    }
  }
}
</script>
